import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中存储
  state: {
    count: 0
  },
  // 只能通过 mutations 变更 State中的数据，不能直接操作Store中的数据，可以集中监控数据的变化
  mutations: {
    add (state) {
      state.count++
    },
    addN (state, step) {
      state.count += step
    },
    sub (state) {
      state.count--
    },
    subN (state, step) {
      state.count -= step
    }
  },
  // 用于执行异步任务
  actions: {
    addAsync (context) {
      setTimeout(() => {
        // commit触发mutations里面的add方法
        context.commit('add')
      }, 1000)
    },
    addAsyncN (context, step) {
      setTimeout(() => {
        // commit触发mutations里面的add方法
        context.commit('addN', step)
      }, 1000)
    },
    subAsync (context) {
      setTimeout(() => {
        context.commit('sub')
      }, 1000)
    },
    subAsyncN (context, step) {
      setTimeout(() => {
        context.commit('subN', step)
      }, 1000)
    }
  },
  getters: {
    showCount: function (state) {
      return '这是处理后的count: ' + state.count
    }
  },
  modules: {}
})
